<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20" style="height: 98vh;background: #F8F8F8 !important;position: relative;">
		<view style="position: absolute;z-index: 111;left: 10rpx;height: 60px"
			:style="[{paddingTop:systemBar + 'px',}]">
			<u-icon name="arrow-left" :size="48" @click="goback"></u-icon>
		</view>
		<!-- 	<view>
			<u-swiper :height="320" :autoplay="false" :list="bannerList" @change="change" @click="click" :indicator="indicator">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ bannerList.length }}</text>
				</view>
			</u-swiper>
		</view> -->
		<view style="padding-top: 0rpx;border-radius: 0rpx;position: relative;">
			<u-swiper :list="bannerList" @change="changeBanner()" indicatorMode="dot" @click="toJoinUs()" :height="500"
				indicator="true" indicatorStyle="right: 20px">

			</u-swiper>
			<view slot="indicator" class="indicator-num" style=" position: absolute;right: 10px;bottom: 10px;">
				<text class="indicator-num__text">{{ currentNum + 1 }} / {{ bannerList.length }}</text>
			</view>
		</view>
		<view style=" height: 136px; background: white;padding-left: 24rpx;border-top-left-radius: 10rpx;border-top-right-radius: 8rpx;top: -5px;
    position: relative;">
			<view style="display: flex;padding-top: 30rpx;position: relative;">
				<view
					style="font-size: 18px;font-weight: bold;overflow: hidden;max-width: 400rpx; white-space: nowrap; text-overflow: ellipsis;">
					{{shopDetail.shop_name}}</view>
				<view style="margin-top: 10rpx;margin-left: 20rpx;">
					<view
						style="padding: 0 5px;color: white;text-align: center; line-height: 18px;font-size: 12px;height: 36rpx;height: 18px;background: linear-gradient(270deg, #FF5251 0%, #FD8E8A 100%);border-radius: 8px 0px 8px 0px;opacity: 1;">
						{{shopDetail.discount}}
					</view>
				</view>
				<view style="position: absolute;right: 30rpx;top: 20px; display: flex;align-items: center;">
					<u-icon v-if="shopDetail.is_fav==1" name="star-fill" size="30" color="#FE811C"
						@click="bindCollection"></u-icon>
					<u-icon v-if="shopDetail.is_fav==0" name="star" size="30" color="#999999" @click="bindCollection">
					</u-icon>
					<view @click="bindCollection"
						style="font-size: 13px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #999999;margin-left: 5rpx;">
						收藏</view>
				</view>

			</view>
			<view style="display: flex;margin-top: 12rpx;">
				<view v-for="(item,index) in shopDetail.shop_tags"
					style="width: 50px;height: 20px;background: #FFF0E4; border-radius: 2px 2px 2px 2px;font-size: 11px;color: #FE811C;text-align: center;display: flex;justify-content: center;align-items: center;margin-right: 20rpx;">
					{{item}}</view>
				<!-- <view style="width: 50px;height: 20px;background: #FFF0E4; border-radius: 2px 2px 2px 2px;font-size: 11px;color: #FE811C;text-align: center;display: flex;justify-content: center;align-items: center;margin-left: 5px;">好评多</view> -->
			</view>
			<view style="display: flex;margin-top: 22rpx;position: relative;">
				<view style="color: #F44240;font-size: 24rpx;margin-right: 14rpx;">{{shopDetail.shop_avg}}</view>
				<view style="font-size: 24rpx;font-weight: 400;color: #777777;margin-left: 5rpx;">
					{{shopDetail.yingye_string}}</view>
				<view style="position: absolute;right: 24rpx;font-size: 12px;color: #777777;" @click="toMore">更多<u-icon
						name="arrow-right"></u-icon>
				</view>
				<!-- <view>></view> -->
			</view>
			<view style="display: flex;margin-top: 22rpx;position: relative;">
				<view v-if="shopDetail.quan_text!=''">
					<image style="width: 32rpx;height: 32rpx;" src="https://duomi.bigchun.com/images/shangbang/quan.png"></image>
				</view>
				<view v-if="shopDetail.quan_text!=''"
					style="border-radius: 5rpx;border-left: transparent;left: -2rpx;position: inherit;;padding: 0 5px;font-size: 10px;font-weight: 500;color: #FC5351;height: 32rpx;border: 1px solid #FC5351;display: flex;align-items: center;justify-content: center;align-content: center; ">
					{{shopDetail.quan_text}}
				</view>
				<view @click="clickLq"
					style="font-size: 10px;padding: 0 10rpx;height: 32rpx;border-radius: 2px 2px 2px 2px;opacity: 1;margin-left: 10rpx;background: #FC5351;color: #FFFFFF;display: flex;align-items: center;justify-content: center;align-content: center;" v-if="shopDetail.quan_text!=''">
					领取更多</view>
				<view style="position: absolute;right: 20rpx;">
					<u-rate :value="shopDetail.shop_score" activeColor="#FE811C" :disabled="true"></u-rate>
				</view>
			</view>
		</view>
		<view style="margin: 20rpx 20rpx 20rpx 0;">
			<view @click="tohuiyuan" v-if="!is_vip"
				style="display: flex;padding: 10px 10px 15px 10px;align-items: center;background: url('https://duomi.bigchun.com/images/cate/huiyuan_bg.png') no-repeat 100%  100%;">
				<view style="width: 15%;">
					<image src="https://duomi.bigchun.com/images/cate/huiyuan.png"
						style="width: 52rpx;height: 52rpx;margin-top: 2px;"></image>
				</view>
				<view style="width: 65%;">
					<view style="font-size: 28rpx;color: #C08549;line-height: 36rpx;font-weight: bold;">多米会员 更多权益</view>
					<view style="font-size: 24rpx;color: #C08549;">欢迎成为多米之家会员</view>
				</view>
				<view>
					<text
						style="padding: 10rpx 20rpx;border-radius: 40rpx;color: #fff;cursor: pointer;background:#D99F65;">开通</text>
				</view>
			</view>
		</view>
		<view
			style="width: 702rpx;background: #FFFFFF;margin-top: 20rpx;margin-left: 24rpx;margin-right: 24rpx;border-radius: 20rpx;">
			<view style="display: flex;padding: 20px 10px;align-items: center;">
				<view style="">
					<view style="font-size: 28rpx;font-weight: 500;width: 470rpx;">{{shopDetail.shop_address}}</view>
					<view style="display: flex;align-items: center;">
						<view>
							<image style="width: 28rpx;height: 28rpx;margin-top: 2px;"
								src="https://duomi.bigchun.com/images/weizhi.png"></image>
							<!-- <u-icon  size="28" name="map-fill"></u-icon> -->

						</view>
						<view style="font-size: 12px;color: #777777;font-weight: 400;line-height: 30px;">
							{{shopDetail.juli_text?shopDetail.juli_text:""}}</view>
					</view>
				</view>
				<view style="display: flex;margin-left: 40rpx;">
					<view>
						<image style="width: 56rpx;height: 56rpx;" src="https://duomi.bigchun.com/images/Group1977.png"
							@click="toMap"></image>
					</view>
					<view style="margin-left: 20rpx;" @click="telPhone">
						<image style="width: 56rpx;height: 56rpx;" src="https://duomi.bigchun.com/images/Group1978.png"></image>
					</view>
				</view>
			</view>

		</view>

		<view v-if="shopDetail.platform_goods || shopDetail.store_goods" style="background: #FFFFFF;margin-top: 20rpx;margin-left: 24rpx;margin-right: 24rpx;border-radius: 20rpx;">
			<view style="padding: 14rpx 0;">
				<text style="font-size: 32rpx;color: #333333;margin: 40rpx 20rpx;">套餐介绍</text>
			</view>
			<view style="display: flex;">
				<view style="padding: 15rpx;font-size: 28rpx;margin-left: 25rpx;" @click="cateType = 'huiyuan'" v-if="shopDetail.store_goods"
					:class="cateType === 'huiyuan'? 'taocan-active':'taocan' ">会员专享</view>
				<view style="padding: 15rpx;font-size: 28rpx;margin-left: 25rpx;" @click="cateType='pingtai'" v-if="shopDetail.platform_goods"
					:class="cateType === 'pingtai'? 'taocan-active':'taocan' ">平台套餐</view>
			</view>
			<view v-for="(item,index) in shopDetail.store_goods" v-if="cateType === 'huiyuan'"
				style="padding: 10px;border-bottom: 1px solid #F3F3F3;display: flex;" :data-id="item.store_shop_id"
				@click="toDetail(item.id,cateType,item.title,shopDetail.id)">
				<view style="position: relative;">
					<image :src="'https://oss.bigchun.com' + item.image"
						style="width: 260rpx;height: 194rpx;border-radius: 8rpx;"></image>
				</view>
				<view>
					<view style="margin-left: 10px;">
						<view style="font-size: 32rpx;font-family: PingFang SC-Bold, PingFang SC;font-weight: bold;color: #333333;line-height: 50rpx;    white-space: nowrap;
			overflow: hidden;width: 400rpx;text-overflow: ellipsis;">{{item.title}}</view>
						<view
							style="font-size: 20rpx;line-height: 60rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #999999;margin-top: 4px;">
							{{item.subtitle}}</view>
						<view >
							<text
								style="font-weight: bold;color: #FE7F1A;font-size: 24rpx;">会员价￥：{{item.vip_price}}</text>
							<text
								style="text-decoration:line-through;font-weight: 500;color: #999999;font-size: 24rpx;">￥{{item.original_price}}</text>
						</view>
					</view>
				</view>
			</view>

			<view v-for="(item,index) in shopDetail.platform_goods" v-if="cateType === 'pingtai'"
				style="padding: 10px;border-bottom: 1px solid #F3F3F3;display: flex;" :data-id="item.store_shop_id"
				@click="toDetail(item.id,'pingtai',item.title,shopDetail.id)">
				<view style="position: relative;">
					<image :src="'https://oss.bigchun.com' + item.image"
						style="width: 260rpx;height: 194rpx;border-radius: 8rpx;"></image>
				</view>
				<view>
					<view style="margin-left: 10px;">
						<view style="font-size: 32rpx;font-family: PingFang SC-Bold, PingFang SC;font-weight: bold;color: #333333;line-height: 50rpx;    white-space: nowrap;
			overflow: hidden;width: 400rpx;text-overflow: ellipsis;">{{item.title}}</view>
						<view
							style="font-size: 20rpx;line-height: 60rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #999999;margin-top: 4px;">
							{{item.subtitle}}</view>
						<!-- <view v-if="">
							<text
								style="font-weight: bold;color: #FE7F1A;font-size: 24rpx;">会员价￥：{{item.vip_price}}</text>
							<text
								style="text-decoration:line-through;font-weight: 500;color: #999999;font-size: 24rpx;">￥{{item.original_price}}</text>
						</view> -->
					</view>
				</view>
			</view>
		</view>


		<view style="background-color: #FFFFFF;">
			<view style="margin-top: 20rpx;">
				<scroll-view scroll-x class="bg-white nav">
					<view class="flex text-center">
						<view class="cu-item flex-sub" :class="index==TabCur?'tabcolor cur':''"
							v-for="(item,index) in list1" :key="index" @tap="tabSelect" :data-id="index">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view v-if=" TabCur == 0"
				style="padding-top: 20px;padding-bottom: 100px;margin-left: 24rpx;margin-right: 24rpx;">
				<view style="display: flex;justify-content: center;align-items: center;"
					v-for="(item,index) in shopDetail.tao_content">
					<image mode="widthFix" style="width: 100%;" :src="item"></image>
				</view>
			</view>
			<view v-if=" TabCur == 1"
				style="padding-bottom: 100px;margin-left: 24rpx;margin-right: 24rpx;margin-top: 20rpx;">
				<!-- <view style="font-weight: bold;">可使用日期</view>
				<view style="margin-top: 20rpx;font-size: 14px;">2022-06-08至2022--08-10有效(周末法定节日通用) </view>
				<view style="font-weight: bold;margin-top: 10rpx;">可用时段</view>
				<view style="margin-top: 10rpx;font-size: 14px;">·营业时间内可用</view>
				<view style="font-weight: bold;margin-top: 10rpx;">使用规则</view>
				<view style="margin-top: 10rpx;font-size: 14px;">·每人总限购5份·全场通用 </view>
				<view style="margin-top: 5rpx;font-size: 14px;">·每桌每次可用数量:2张</view>
				<view style="margin-top: 5rpx;font-size: 14px;">满300可用1张，满600可用2张·不可与其他优惠共享</view>
				<view style="margin-top: 5rpx;font-size: 14px;">·餐毕未吃完可打包，打包费详情咨询商家</view>
				<view style="margin-top: 5rpx;font-size: 14px;">·店内人均参考价￥100</view>
				<view style="margin-top: 5rpx;font-size: 14px;">·不可拆桌或拼桌使用</view>
				<view style="margin-top: 5rpx;font-size: 14px;">·包间需要提前2小时预约</view> -->
				<!-- 		<rich-text :nodes="shopDetail.use_content"></rich-text> -->
				<view style="display: flex;justify-content: center;align-items: center;"
					v-for="(item,index) in shopDetail.use_content">
					<image mode="widthFix" style="width: 100%;" :src="item"></image>
				</view>
			</view>
			<view v-if=" TabCur == 2"
				style="padding-bottom: 100px;padding-left: 24rpx;padding-right: 24rpx;padding-top: 20rpx;background: #FFFFFF;">
				<view v-for="(item,index) in commentLists">
					<view style="display: flex;height: 25px;align-items: center;margin-bottom: 10rpx;">
						<view
							style="width: 36rpx;height: 36rpx;background: #999999;border-radius: 50%;background-size: 100% 100%;"
							:style="{ backgroundImage: ' url(' + item.avatar + ')' }"></view>
						<view style="font-size: 14px;font-weight: 500;margin-left: 8rpx;">{{item.nickname}}</view>
					</view>
					<view style="font-size: 14px;font-weight: 400;color: #333333;line-height: 26px;">{{item.comment}}
					</view>
					<view class="time">{{item.createtime_text}}</view>
					<view style="margin-left: 24rpx;margin-right: 24rpx;border: 1px solid #FFFFFF;"></view>
				</view>
			</view>
			<!-- <view @click="maidan" style="position: fixed;bottom: 0px;">
				<view class="submit">立即买单</view>
			</view> -->

		</view>

		<view v-if="modalName == true" class="cu-modal bottom-modal show " style="z-index: 999">
			<view class="cu-dialog" style="padding-bottom: 100rpx;background-color: #FFFFFF;">
				<view class="cu-bar bg-white">
					<view class="action"
						style="margin: 0 auto;color: #333333;font-size: 14px;font-weight: bold;font-family: PingFang SC-Bold, PingFang SC;">
						店铺优惠券</view>
					<u-icon name="close" size="25" @click="hideModal" style="position: absolute;right: 20rpx;"></u-icon>
				</view>
				<view>
					<view v-for="(item,index) in shopDetail.store_coupon"
						style="background-color: #fdf5f2;margin: 0 20rpx;padding: 10px;border-radius: 10rpx;margin-top: 20rpx;">
						<view style="display: flex;">
							<view style="flex: 1.25;display: flex;align-items: center;">
								<view class="bi">￥</view>
								<view class="qian">{{item.amount}}</view>
							</view>
							<view style="flex: 2;display: flex;align-items: flex-start;flex-direction: column;">
								<view class="man" style="line-height: 35px;">{{item.enough_text}}</view>
								<view class="tim" style="line-height: 30px;white-space: nowrap;">截止：{{item.expire_text}}
								</view>
							</view>
							<view style="flex: 1;display: flex;justify-content: flex-end;align-items: center;">
								<view v-if="item.is_send==0"
									style="width: 54px;line-height:24px;background: #FC5351;border-radius: 4px 4px 4px 4px;opacity: 1;color: white;font-size: 12px;"
									@click="receive(item)">领取</view>
								<view v-if="item.is_send==1"
									style="width: 54px;line-height:24px;background: #D2D2D2;border-radius: 4px 4px 4px 4px;opacity: 1;color: white;font-size: 12px;">
									已领取</view>

							</view>
						</view>
					</view>
					<!-- <view style="background-color: #fdf5f2;margin: 0 20rpx;padding: 10px;border-radius: 10rpx;margin-top: 20rpx;">
						<view style="display: flex;">
							<view style="flex: 1;display: flex;align-items: center;">
								<view class="bi">￥</view>
								<view class="qian">10</view>
							</view>
							<view style="flex: 2;display: flex;align-items: flex-start;flex-direction: column;">
								<view class="man" style="line-height: 35px;">满100元可用</view>
								<view class="tim" style="line-height: 30px;">截止：2022.08.01 23:59</view>
							</view>
							<view style="flex: 1;display: flex;justify-content: flex-end;align-items: center;">
								<view style="width: 54px;line-height:24px;background: #FC5351;border-radius: 4px 4px 4px 4px;opacity: 1;color: white;font-size: 12px;">领取</view>
							</view>
						</view>
					</view>
					<view style="background-color: #fdf5f2;margin: 0 20rpx;padding: 10px;border-radius: 10rpx;margin-top: 20rpx;">
						<view style="display: flex;">
							<view style="flex: 1;display: flex;align-items: center;">
								<view class="bi">￥</view>
								<view class="qian">10</view>
							</view>
							<view style="flex: 2;display: flex;align-items: flex-start;flex-direction: column;">
								<view class="man" style="line-height: 35px;">满100元可用</view>
								<view class="tim" style="line-height: 30px;">截止：2022.08.01 23:59</view>
							</view>
							<view style="flex: 1;display: flex;justify-content: flex-end;align-items: center;">
								<view style="width: 54px;line-height:24px;background: #FC5351;border-radius: 4px 4px 4px 4px;opacity: 1;color: white;font-size: 12px;">领取</view>
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	// 获取系统状态栏的高度
	let systemInfo = uni.getSystemInfoSync();
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import HuixuanClassify from "../../components/huixuan-classify/huixuan-classify";
	import HuixuanExercise from "../../components/huixuan-exercise/huixuan-exercise";
	export default {
		components: {},
		data() {
			return {
        is_vip:0,
				cateType: 'huiyuan',
				collection: false,
				currentNum: 0,
				indicator: true,
				scrollLeft: 0,
				TabCur: 0,
				bannerList: [],
				list1: [{
						name: '商家信息',
						type: "0"
					}, {
						name: '使用须知',
						type: "1"
					},
					{
						name: '用户评论',
						type: "2"
					}
				],
				statusBarHeight: systemInfo.statusBarHeight,
				showpopup: false,
				active: "1",
				themeColor: "#FC5351",
				// #ifdef MP-WEIXIN
				// #endif
				isRefresh: true,
				enable: false, //是否开启吸顶。
				isConnected: true, //是否有网
				showPrivacy: false, //协议
				isScorll: false,
				sortList: [{
						name: "智能排序",
						id: "1"
					},
					{
						name: "折扣高低",
						id: "2"
					},
					{
						name: "人均消费高低",
						id: "3"
					},
					{
						name: "好评优先",
						id: "4"
					},
					{
						name: "销量优先",
						id: "5"
					},
					{
						name: "距离优先",
						id: "6"
					},
				],
				list: [{
						name: 'https://duomi.bigchun.com/images/shangbang/cyms.png',
						title: '餐饮美食',
					},
					{
						name: 'https://duomi.bigchun.com/images/shangbang/jdzs.png',
						title: '酒店住宿'
					},
					{
						name: 'https://duomi.bigchun.com/images/shangbang/dyyc.png',
						title: '电影演出'
					},
					{
						name: 'https://duomi.bigchun.com/images/shangbang/ydjs.png',
						title: '运动健身'
					},
					{
						name: 'https://duomi.bigchun.com/images/shangbang/scgw.png',
						title: '商城购物'
					},
					{
						name: 'https://duomi.bigchun.com/images/shangbang/cyms.png',
						title: '医学美容'
					}, {
						name: 'https://duomi.bigchun.com/images/shangbang/ycyc.png',
						title: '养车/用车'
					},
					{
						name: 'https://duomi.bigchun.com/images/shangbang/ylyk.png',
						title: '医疗/牙科'
					},
					{
						name: 'https://duomi.bigchun.com/images/shangbang/qzly.png',
						title: '亲子乐园'
					},
					{
						name: 'https://duomi.bigchun.com/images/shangbang/qbfw.png',
						title: '全部服务'
					}
				],
				systemBar: "",
				navigationBar: "",
				menu: "",
				modalName: false,
				shopDetail: null,
				commentLists: null
			};
		},
		computed: {},
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.isScorll = e.scrollTop > 100 ? true : false;
		},
		onShow() {
			let that = this;
			this.enable = true;
			this.isLogin && this.getCartList();
			// 网络变化检测
			uni.onNetworkStatusChange(res => {
				this.isConnected = res.isConnected;
				res.isConnected && this.init();
			});
		},
		onHide() {
			this.enable = false;
		},
		onLoad(options) {
			// console.log(options,getCurrentPages()[0].options,"options")
			this.store_shop_id = options ? options.id : getCurrentPages()[0].options.id
			wx.getSystemInfo({
				success: res => {
					this.system = res
				}
			})
			this.init();
			this.getCommentLists();
			//获取胶囊信息
			this.menu = wx.getMenuButtonBoundingClientRect()
			this.systemBar = this.system.statusBarHeight //状态栏高度
			this.navigationBar = (this.menu.top - this.system.statusBarHeight) * 2 + this.menu.height //胶囊高度

			console.log(this.menu)
			console.log(this.systemBar)
			console.log(this.navigationBar)
			// #ifdef APP-VUE
			// app隐私协议弹窗

			if (!plus.runtime.isAgreePrivacy()) {
				this.showPrivacy = true;
				this.showNoticeModal = false;
			}

			// #endif
		},
		methods: {
      getVip() {
        this.$https('user.isVip').then(res => {
          if (res.code === 1) {
            this.is_vip = res.data;
          }
        })
      },
			changeBanner(current) {
				console.log(current);
				this.currentNum = current;
			},
			receive(item) {
				console.log(item);
				var that = this;
				that.$https('category.userget', {
						token: uni.getStorageSync("token"),
						store_coupon_id: item.store_coupon_id,
					})
					.then(res => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						that.hideModal()
					});
			},
			async init() {
				console.log("=========shopDetail")
				var that = this;
        that.getVip()
				that.$https('category.shopDetail', {
						token: uni.getStorageSync("token"),
						store_shop_id: this.store_shop_id,
						latitude: uni.getStorageSync("latitude"),
						longitude: uni.getStorageSync("longitude")
					})
					.then(res => {
						if (res.code === 1) {
							that.shopDetail = res.data;
							that.bannerList = that.shopDetail.images
						}
					});
			},

			async getCommentLists() {
				console.log("=========commentLists")
				var that = this;
				that.$https('category.commentLists', {
						token: uni.getStorageSync("token"),
						store_shop_id: this.store_shop_id
					})
					.then(res => {
						console.log("*****************--", res);
						if (res.code === 1) {
							that.commentLists = res.data.data;

					 }
					});
			},
			bindCollection() {
				console.log('favorite')
				console.log("=========favorite")
				var that = this;
				that.$https('category.favorite', {
					token: uni.getStorageSync("token"),
					store_shop_id: this.store_shop_id
				}).then(res => {
					console.log("*****************favorite", res);
					if (res.code === 1) {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						if (this.shopDetail.is_fav == 1) {
							this.shopDetail.is_fav = 0
						} else {
							this.shopDetail.is_fav = 1
						}

					}
				});

			},
			telPhone() {
				uni.makePhoneCall({
					phoneNumber: this.shopDetail.shop_mobile
				});
			},
			goback() {
				console.log(getCurrentPages().length, "getCurrentPages()")
				if (getCurrentPages().length == 1) {
					// console.log(111);
					uni.switchTab({
						url: "/pages/index/index"
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
				// uni.getPgae

			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			clickFood(e) {
				console.log('e', e)
				if (e.title == '餐饮美食') {
					uni.navigateTo({
						url: '/pages/index/food'
					})
				}
			},
			tohuiyuan() {
				uni.navigateTo({
					url: '/pages/index/membeRecharge'
				})
			},
			toMore() {
				uni.navigateTo({
					url: '/pages/index/category/more?id=' + this.store_shop_id
				})
			},
			toDetail(taocanId,taocanType,title,id){
				uni.navigateTo({
					url: 'pages/index/goodsToPay?taocanId=' + taocanId + '&taocanType=' + taocanType
					+ '&title=' + title + '&id=' +id
				})
			},
			maidan() {
				uni.navigateTo({
					url: '/pages/index/pay?id=' + this.store_shop_id
				})
			},
			hideModal() {
				this.modalName = false
			},
			clickLq() {
				console.log("111111111")
				this.modalName = true
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showpopup = false
				// console.log('close');
			},
			toMap() {
				uni.openLocation({
					latitude: Number(this.shopDetail.latitude),
					longitude: Number(this.shopDetail.longitude),
					name: this.shopDetail.shop_name,
					address: this.shopDetail.shop_address,
					success: function() {
						console.log('success');
					}
				});
			},
			checkFilter(active) {
				if (active == '3') {
					this.showpopup = true
					console.log(this.showpopup);
					this.active = active;

				} else {
					this.active = active;
				}

			},
			result(val) {
				console.log('filter_result:' + JSON.stringify(val));
				this.filterResult = JSON.stringify(val, null, 2)
			},
			...mapActions(['appInit', 'getTemplate', 'getCartList','userInfo']),
			// 初始化
			// init() {
			// 	this.isRefresh = false;
			// 	return Promise.all([this.getTemplate()]).then(() => {
			// 		uni.stopPullDownRefresh();
			// 		this.isRefresh = true;
			// 	});

			// }
		}
	};
</script>

<style lang="scss" scoped>
	/deep/.u-drawer-content {
		border-radius: 10px !important;
	}

	/deep/.u-drawer__scroll-view {
		border-radius: 10px !important;
	}

	/deep/.cu-bar .content {
		margin: auto 20rpx;
		width: 450rpx;
	}

	/deep/.u-grid-item {
		background: #f6f6f6 !important;
	}

	/deep/.uni-scroll-view {
		padding-top: 0px !important;
	}

	page {
		background-color: #fcfcfc !important;
	}

	.icon {
		width: 72rpx;
		height: 72rpx;
	}

	.tabcolor {
		// color: #000000;
		font-weight: bold;
		color: #333333;
		font-size: 14px;
	}

	.time {
		font-size: 12px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
		line-height: 22px;
		margin-top: 20rpx;
	}

	.submit {
		width: 100vw;
		height: 49px;
		background: #D9D9D9 linear-gradient(80deg, #FD5755 0%, #FF6A68 100%);
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		margin-top: 20px;
	}

	.cu-item.cur {
		border-bottom: 4rpx solid #FD5755;
	}

	.cur::after {
		content: '';
		width: 50%;
		height: 1px;
		display: block;
		margin: 0 auto;
		border-bottom: 4rpx solid #FD5755;
		padding: 1px;
	}

	.grid-text {
		height: 32rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 70rpx;
	}

	.content {
		margin: 20rpx;
		border-radius: 8px 8px 8px 8px;
		background-color: white;
	}

	.filter {
		display: flex;
		align-items: center;
		flex-direction: row;

		view {
			flex: 1;
			text-align: center;
			line-height: 70rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #777777;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		u-icon {
			margin-left: 8rpx;
		}

		.active {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FC5351;
		}
	}

	.lable {
		font-size: 10px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FC5351;
		border-bottom: .5px solid #FC5351;
		border-top: 1px solid #FC5351;
		border-right: 1px solid #FC5351;
		border-left: px solid black;
		padding: 0px 5px;
		left: -4rpx;
		position: relative;
		border-radius: 4rpx;
		line-height: 26rpx;

	}

	.popup-box {
		padding-top: var(--status-bar-height);
		margin: 0 20rpx;
	}

	.nav-line {
		height: var(--window-top);
	}

	.check-right {
		height: 54px;
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 19px;
		align-items: center;
		display: flex;

		.active {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FC5351;
		}
	}

	.indicator {
		flex-direction: row;
		justify-content: center;
		display: flex;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		display: flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.img {
		width: 702rpx;
		height: 166rpx;
		background-image: url('https://duomi.bigchun.com/images/Subtract.png');
		background-size: cover;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}

	.bi {
		position: relative;
		top: 4px;
		font-size: 18px;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FC5351;
	}

	.qian {
		font-size: 28px;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FC5351;
	}

	.man {
		font-size: 18px;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FC5351;
	}

	.tim {
		font-size: 12px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 14px;
	}

	.taocan {
		border-radius: 17px;
		color: #999999;
		background: #F1F1F1;
	}

	.taocan-active {
		border-radius: 17px;
		color: #FC5351;

		background: rgba(252, 83, 81, 0.11);
	}
</style>
